<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .block-box > div {
            display: block; /*设置为块级盒子，其实div本来就是块级盒子*/
            width: 200px;
            height: 200px;
            background-color: gray;
            margin-top: 10px;
        }

        .block-box > .block-box-div {
            padding: 10px;
            border: 5px solid black;
            margin: 20px;
        }

        .inline-box > div {
            display: inline; /*设置为块级盒子，其实div本来就是块级盒子*/
            width: 200px; /*失效*/
            height: 200px; /*失效*/
            background-color: gray;
        }

        .inline-box > .inline-box-div {
            padding: 10px;
            border: 5px solid red;
            margin: 20px;
            background-color: pink;
        }

        .standard-box {
            width: 250px;
            height: 150px;
            padding: 25px;
            border: 5px skyblue solid;
            margin: 25px;
            background-color: pink;
        }

        .replace-box {
            box-sizing: border-box;
            width: 250px;
            height: 150px;
            padding: 25px;
            border: 5px skyblue solid;
            margin: 25px;
            background-color: pink;
        }

        .margin-box-div > div {
            display: flex;
            column-gap: 10px
        }

        .margin-box-div > div > div { /*该层div加上边框用于方便观察*/
            border: 2px solid black;
        }

        .margin-box-div > div > div > div {
            width: 250px;
            height: 150px;
            background-color: pink;
        }

        .overlapping-box-div > .overlapping-box-bro > div {
            width: 250px;
            height: 150px;
            background-color: pink;
        }

        .overlapping-box-div > .overlapping-box-fuhou > div > div {
            width: 250px;
            height: 150px;
            background-color: pink;
        }


        .overlapping-box-div > .overlapping-box-emptyblock {
            border: 2px solid black;
            width: 250px;
        }
    </style>
  </head>
  <body>
    <!--1.块级盒子&内联盒子-->
    <!--**块级盒子**中盒子与父元素同宽，高度被内容撑开、盒子会换行、`width`和`height`样式可自定义、内边距和外边距和边框会将其他元素从当前盒子周围推开-->
    <!--<div class="block-box">
      <div></div>
      <div class="block-box-div"></div>
      <div></div>
    </div>
    <br><br><br>-->
    <!--**内联盒子**中盒子宽高由内容撑开、盒子不换行、`width`和`height`样式不起作用、垂直方向设置内边距和外边距和边框会被应用但不会将其他内联盒子推开、水平方向设置内边距和外边距和边框会被应用且会将其他内联盒子推开-->
    <!--<div class="inline-box">
      <div>内联盒子大小被内容撑开</div>
      <div>内联盒子大小被内容撑开</div>
      <div>内联盒子大小被内容撑开</div>
      <div>内联盒子大小被内容撑开</div>
      <div class="inline-box-div">内联盒子大小被内容撑开</div>
      <div>内联盒子大小被内容撑开</div>
      <div>内联盒子大小被内容撑开</div>
      <div>内联盒子大小被内容撑开</div>
      <div>内联盒子大小被内容撑开</div>
      <div>内联盒子大小被内容撑开</div>
      <div>内联盒子大小被内容撑开</div>
      <div>内联盒子大小被内容撑开</div>
    </div>-->

    <!--2.标准盒模型&替代盒模型：浏览器默认使用标准盒模型，若想要使用替代盒模型可通过`box-sizing: border-box;`设置-->
    <!--标准盒模型中，**整个盒子的大小实际由`height`、`width`、`padding`、`border`共同决定，`margin`不计入盒子大小，但是影响盒子的外部空间**-->
    <!--<div class="standard-box"></div>-->
    <!--替代(IE)盒模型中，**整个盒子的大小只由`height`、`width`决定，即设置的宽高就是实际可见宽高**-->
    <!--<div class="replace-box"></div>-->

    <!--3.盒模型组成-->
    <!--外边距(空白边)位于盒子的最外围，使盒子之间不会紧凑地挨在一起。无论使用标准模型还是替代模型，**外边距大小总是不影响可见框大小**，但会将其他元素从盒子的四周推开。**外边距属性值可正可负**，设置复制可能会使元素重叠-->
    <!--<div class="margin-box-div" style="display: flex;flex-direction: column;row-gap: 10px">
      &lt;!&ndash;四个方向上单独设置margin&ndash;&gt;
      <div>
        <div>
          <div style="margin-top: 10px"></div>
        </div>

        <div style="height: 150px">
          <div style="margin-right: 10px"></div>
        </div>

        <div>
          <div style="margin-bottom: 10px"></div>
        </div>

        <div style="height: 150px">
          <div style="margin-left: 10px"></div>
        </div>
      </div>

      &lt;!&ndash;margin属性设置四个方向&ndash;&gt;
      <div>
        <div>
          <div style="margin: 20px 15px 10px 5px"></div>
        </div>

        <div>
          <div style="margin: 20px 15px 10px"></div>
        </div>

        <div>
          <div style="margin: 15px 5px"></div>
        </div>

        <div>
          <div style="margin: 15px"></div>
        </div>
      </div>

      &lt;!&ndash;负值&ndash;&gt;
      <div>
        <div>
          <div style="margin-right: -10px"></div>
        </div>
      </div>
    </div>
    <br><br><br>-->
    <!--**垂直方向上的外边距可能发生重叠的情况**，若两元素垂直外边距上下相接且发成重叠，则这两元素实际间隔为最大的单个边距，而不是两边距之和。同时并不是所有情况下都会发生边距重叠，例如存在`float`或`absolute`属性值的元素不会，会发生外边距重叠的情况如下-->
    <!--<div class="overlapping-box-div">
      &lt;!&ndash; ···兄弟元素间且后一个元素未设置`clear-fix`属性 &ndash;&gt;
      &lt;!&ndash;<div class="overlapping-box-bro">
        <div style="margin-bottom: 80px"></div>
        <div style="margin-top: 20px"></div>
      </div>&ndash;&gt;

      &lt;!&ndash; ···父元素与后代元素之间没有任何内容分隔 &ndash;&gt;
      &lt;!&ndash;<div class="overlapping-box-fuhou">
        <div style="margin-top: 80px;margin-bottom: 20px">
          <div style="margin-top: 20px"></div>
          <hr>
          <div style="margin-bottom: 80px"></div>
        </div>

        <div style="height: 150px;width: 250px;background-color: skyblue"></div>
      </div>
      <br><br>&ndash;&gt;

      &lt;!&ndash; ···空块级元素 &ndash;&gt;
      &lt;!&ndash;<div class="overlapping-box-emptyblock">
        <div style="margin-top: 80px;margin-bottom: 20px"></div>
      </div>&ndash;&gt;
    </div>-->
    <!--内边距位于边框和内容区之间，使内容与边框不会紧凑地挨在一起。与外边距不同，**内边距不允许设置负值**，应用于元素的**背景将显示在内边距后面**-->
    <!--<div class="padding-box" style="width: 100px;height: 100px;padding: 20px;background-color: skyblue">
      &lt;!&ndash;只测试背景延申特性&ndash;&gt;
    </div>-->
    <!--边框位于盒子边缘，即内边距和外边距之间。**标准盒模型中边框影响盒子大小**-->
    <div class="border-box" style="width: 100px;height: 100px;background-color: skyblue;border: 5px pink solid"></div>
  </body>
</html>